import React from 'react';
import './ReArea.css'
import {Button, Select, Table,  DatePicker,  Radio, Row, Col, Tooltip, Tabs } from 'antd';
import axios from 'axios'
import {QuestionCircleOutlined} from '@ant-design/icons';

// import echarts from 'echarts/lib/echarts';
// import  'echarts/lib/chart/pie';
// import  'echarts/lib/component/tooltip';
// import  'echarts/lib/component/title';
// import  'echarts/lib/component/legend'
// import  'echarts/lib/component/markPoint'

var echarts = require('echarts');

const { TabPane } = Tabs;
const { RangePicker } = DatePicker;
const text = <ul style={{
    listStyle:'none',
    margin:'0',
    padding:'0',
    fontSize:'12px'}}><li>1、订货单/退货单提交订单后即计入统计；</li>
    <li>2、作废的订/退货单不计入统计；</li>
    <li>3、运费不计入统计；</li>
    <li>4、如需【品牌】字段有内容，需在【系统设置-系统参数设置-商品设置】中启用商品品牌，并在商品列表完善商品品牌信息；</li>
    <li>5、统计商品订货金额时，订单促销及组合促销(按金额)的优惠金额未扣减；</li>
    <li>6、客户订单归属区域/部门实时取【客户列表】中最新值。</li>
</ul>;
const title = {
    color: '#96a6b6',
    fontSize: '13px',
    transition: 'all .5s',
    marginTop: '25px'
};
const purchase = {
    cursor: 'pointer',
    height: '100%'
};
const contrast = {
    color: '#7b8aa1'
};
const title2 = {
    backgroundColor:'#f8f9fd',
    textAlign:'center',
    height: '110px',
    borderTop:'1px solid #eee',
    borderBottom: '1px solid #f1f2f7',
    borderLeft: '1px solid #eee',
    borderRight: '1px solid #eee'
};
const num = {
    color: '#415161',
    fontSize: '22px'
};
const content = {
    borderLeft: '1px solid #ebebeb',
    borderRight: '1px solid #ebebeb'
};
const lastnum = {
    color: '#7b8aa1',
    position: 'absolute',
    right: '0'
};
const { Option, OptGroup } = Select;
const columns = [
    {
        title: '区域(全部)',
        dataIndex: '',
        key: '',
    },{
        title: '订货单',
        dataIndex: '',
        key: '',
    },{
        title: '退货单',
        dataIndex: '',
        key: '',
    },{
        title: '订货金额',
        dataIndex: '',
        key: '',
    },{
        title: '退货金额',
        dataIndex: '',
        key: '',
    },{
        title: '金额小计',
        dataIndex: '',
        key: '',
    },
];
const columns2 = [
    {
        title: '商品分类(全部)',
        dataIndex: '',
        key: '',
    },{
        title: '订货数量',
        dataIndex: '',
        key: '',
    },{
        title: '退货数量',
        dataIndex: '',
        key: '',
    },{
        title: '订货金额',
        dataIndex: '',
        key: '',
    },{
        title: '退货金额',
        dataIndex: '',
        key: '',
    },{
        title: '金额小计',
        dataIndex: '',
        key: '',
    },
];
const data = [

];
const data2 = [

];

function handleChange(value) {
    console.log(`selected ${value}`);
}
function callback(key) {
    console.log(key);
}
class ReArea extends React.Component {
    constructor(){
        super();
        this.state={

        };

    }
    componentDidMount() {
        //地区统计报表订单饼图
        let myChart = echarts.init(document.getElementById('area'));
        // 绘制图表
        myChart.setOption({
            tooltip : {
                trigger: 'item',
                //提示框浮层内容格式器，支持字符串模板和回调函数形式。
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                top: 20,
                right: 5,
                data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
            },
            series : [
                {
                    name:'订单量',
                    type:'pie',
                    data:[
                        {value:1000, name:'星期一'}
                    ],
                }
            ]
        });
        myChart.on('finished', function () {
            myChart.resize();
        });
        //地区统计报表商品数量饼图
        let goodNumChart = echarts.init(document.getElementById('goodnum'));
        // 绘制图表
        goodNumChart.setOption({
            title: {
                text: '订货数量排行榜',
                x: 'center'
            },
            series : [
                {
                    name:'',
                    type:'pie',
                    data:[
                       {value:1000, name:'星期一'}
                    ],
                }
            ]
        });
        goodNumChart.on('finished', function () {
            goodNumChart.resize();
        });
        //地区统计报表商品金额饼图
        var GoodMonChart = echarts.init(document.getElementById('goodmon'));
        // 绘制图表
        GoodMonChart.setOption({
            title: {
                text: '订货金额排行榜',
                x: 'center'
            },
            series : [
                {
                    name:'',
                    type:'pie',
                    data:[
                        {value:1000, name:'星期一'}
                    ],
                }
            ]
        });
        GoodMonChart.on('finished', function () {
            GoodMonChart.resize();
        });
    }

    render() {
        return (
            <div id={'mainContent'}>
                <Row style={{marginBottom:'8px'}}>
                    <Col span={6}>
                        <Radio.Group defaultValue="a" buttonStyle="solid" className={'rg'}>
                            <Radio.Button value="a">本周</Radio.Button>
                            <Radio.Button value="b">上周</Radio.Button>
                            <Radio.Button value="c">本月</Radio.Button>
                            <Radio.Button value="d">上月</Radio.Button>
                        </Radio.Group>
                    </Col>
                    <Col span={6}>
                        <RangePicker/>
                    </Col>
                    <Col span={6}>
                    </Col>
                    <Col span={6}>
                        <div style={{textAlign:"right"}}>
                            <Tooltip placement="bottomRight" title={text}>
                                <span style={{marginRight:'5px',cursor:'pointer'}} id={'icon'}>统计说明</span>
                                <QuestionCircleOutlined className={'icon1'}/>
                                <QuestionCircleOutlined className={'icon2'}/>
                            </Tooltip>
                            <Button type="primary" style={{marginLeft:'10px'}}>导出</Button>
                        </div>
                    </Col>
                </Row>
                <div className={'body'}>
                    <Tabs defaultActiveKey="1" type={"card"}>
                        <TabPane tab="按订单查看" key="1">
                            <div style={content}>
                                <div style={{padding:'25px 0 25px 0'}}>
                                    <Select defaultValue="1" style={{ width:'185px',margin:'0 8% 0 5%'}} onChange={handleChange}>
                                        <Option value="1">按区域统计</Option>
                                        <Option value="2">按部门统计</Option>
                                    </Select>
                                    <Select defaultValue="1" style={{ width:'185px',margin:'0 8% 0 5%'}} onChange={handleChange}>
                                        <Option value="1">全部</Option>
                                        <OptGroup label="中国">
                                            <Option value="jack">Jack</Option>
                                            <Option value="lucy">Lucy</Option>
                                        </OptGroup>
                                        <Option value="2">其他区域</Option>
                                    </Select>
                                    <Select defaultValue="1" style={{ width:'185px',margin:'0 8% 0 5%'}} onChange={handleChange}>
                                        <Option value="1">订货金额</Option>
                                        <Option value="2">退货金额</Option>

                                    </Select>

                                </div>
                                <div id="area" style={{width: '50%', height: 400}}/>
                            </div>
                            <div>
                                    <Table columns={columns} dataSource={data} />
                                </div>
                        </TabPane>
                        <TabPane tab="按商品查看" key="2" forceRender={true}>
                            <div style={content}>
                                <div style={{padding:'25px 0 25px 0'}}>
                                    <Select defaultValue="1" style={{ width:'185px',margin:'0 8% 0 5%'}} onChange={handleChange}>
                                        <Option value="1">按区域统计</Option>
                                        <Option value="2">按部门统计</Option>
                                    </Select>
                                    <Select defaultValue="1" style={{ width:'185px',margin:'0 8% 0 5%'}} onChange={handleChange}>
                                        <Option value="1">全部</Option>
                                        <OptGroup label="中国">
                                            <Option value="jack">Jack</Option>
                                            <Option value="lucy">Lucy</Option>
                                        </OptGroup>
                                        <Option value="2">其他区域</Option>
                                    </Select>
                                    <Select defaultValue="1" style={{ width:'185px',margin:'0 8% 0 5%'}} onChange={handleChange}>
                                        <Option value="1">按分类</Option>
                                        <Option value="1">按品牌</Option>
                                        <Option value="1">按商品</Option>
                                    </Select>
                                </div>
                                <Row>
                                    <Col span={12}>
                                        <div id="goodnum" style={{width: '100%', height: 400}}/>
                                    </Col>
                                    <Col span={12}>
                                        <div id="goodmon" style={{width: '100%', height: 400}}/>
                                    </Col>
                                </Row>
                            </div>
                            <div>
                                <Table columns={columns2} dataSource={data2} />
                            </div>
                        </TabPane>
                    </Tabs>,
                </div>
            </div>
        );
    }
}

export default ReArea;